<template>
    <div class="Merchandising">
        <zlj-header msg="体检套餐管理"></zlj-header>
        <div class="section">
            <div class="search">
                <p>数据筛选</p>
                <!-- 表单 -->
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="输入查询:" class="item2">
                        <el-input v-model="formInline.user" placeholder="套餐名称" clearable class="input-lwy" />
                    </el-form-item>
                    <el-form-item label="适用地区:" class="item1">
                        <el-select v-model="formInline.region" placeholder="选择省份" clearable class="select1">
                            <el-option v-for="data in provDatas" :key="data.provinceId" :label="data.provinceName"
                                :value="data.provinceId" @click="provinceId1(data.provinceId)" />
                        </el-select>
                        <el-select v-model="formInline.region1" placeholder="选择地区" clearable class="select2">
                            <el-option v-for="data in cityDatas" :key="data.cityId" :label="data.cityName"
                                :value="data.cityId" @click="provinceId2(data.cityId)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="适用机构:" class="item">
                        <el-select v-model="formInline.region2" placeholder="选择机构" clearable>
                            <el-option v-for="data in OragnDatas" :key="data.organId" :label="data.organName"
                                :value="data.organId" @click="provinceId3(data.organId)" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="primary" @click="onSubmit1" class="button1">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 按钮 -->
            <el-button class="button2" @click="dialogFormVisible = true">添加</el-button>
            <el-button class="button2" @click="open">删除</el-button>
            <a class="button3" href="http://8.137.101.130:8080/admin/package/excelDownload">导出</a>
            <!-- 表格 -->
            <div class="table">
                <el-table ref="multipleTableRef" :data="tableData" style="width: 100%"
                    @selection-change="handleSelectionChange" stripe>
                    <el-table-column type="selection" class="sel1" />
                    <el-table-column property="id" label="套餐ID" />
                    <el-table-column property="name" label="套餐名称" />
                    <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                    <el-table-column property="currentPrice" label="售价" show-overflow-tooltip />
                    <el-table-column property="provinceName" label="适用地区" show-overflow-tooltip>
                        <template #default="scope">
                            {{ scope.row.provinceName }} , {{ scope.row.cityName }}
                        </template>
                    </el-table-column>
                    <el-table-column property="status" label="是否启用" show-overflow-tooltip>
                        <template #default="scope">
                            {{ scope.row.status === 0 ? '未启用' : '启用' }}
                        </template>
                    </el-table-column>
                    <el-table-column property="orderNumber" label="订购数量" show-overflow-tooltip />
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button link type="primary" size="small" @click="handleClick1(scope.row)">体检项</el-button>
                            <el-button link type="primary" size="small" @click="handleClick(scope.row)">编辑</el-button>
                            <el-popconfirm title="确定要删除吗" @confirm="del(scope.row)">
                                <template #reference>
                                    <el-button link type="primary" size="small">删除</el-button>
                                </template>
                            </el-popconfirm>
                            <el-button link type="primary" size="small" @click="handleClick2(scope.row)">图片</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="demo-pagination-block">
                <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                    :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
        <!-- 添加弹框 -->
        <div class="add-bullet">
            <el-dialog v-model="dialogFormVisible" title="新增体检套餐">
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="基本信息" name="first" class="el-tab-pane-first">
                        <el-form :model="form">
                            <div class="add-form">
                                <div class="from1">
                                    <div class="from1-1">
                                        <el-form-item label="套餐名称:" :label-width="'10rem'" class="add-text">
                                            <el-input v-model="form.name" class="add-input" />
                                        </el-form-item>
                                        <el-form-item label="套餐ID:" :label-width="'10rem'" class="add-text">
                                            <el-input v-model="form.id" class="add-input" placeholder="系统自动生成" disabled />
                                        </el-form-item>
                                        <el-form-item label="是否启用:" :label-width="'10rem'" class="add-text">
                                            <el-switch v-model="form.status" />
                                        </el-form-item>
                                        <el-form-item label="适用标签:" :label-width="'10rem'" class="add-text add-text1"
                                            v-model="form.packageTag">
                                            <el-check-tag :checked="checked[0]" @change="onChange(0)">男性套餐</el-check-tag>
                                            <el-check-tag :checked="checked[1]" @change="onChange(1)">女性套餐</el-check-tag>
                                            <el-check-tag :checked="checked[2]" @change="onChange(2)">老人套餐</el-check-tag>
                                            <el-check-tag :checked="checked[3]" @change="onChange(3)">入职体检</el-check-tag>
                                        </el-form-item>

                                        <el-form-item label="有效时间截止至:" :label-width="'12rem'">
                                            <el-date-picker v-model="form.effectiveTime" type="date"
                                                placeholder="Pick a date" clearable />
                                        </el-form-item>
                                        <el-form-item label="原价:" :label-width="'10rem'" class="add-text add-text1">
                                            <el-input v-model="form.originalPrice" class="add-input" />
                                        </el-form-item>
                                        <el-form-item label="售价:" :label-width="'10rem'" class="add-text add-text1">
                                            <el-input v-model="form.currentPrice" class="add-input" />
                                        </el-form-item>
                                    </div>
                                    <div class="from1-2">
                                        <el-form-item label="适用城市:" class="add-text">
                                            <el-select v-model="form.economize" placeholder="选择省份" clearable
                                                class="add-select">
                                                <el-option v-for="data in provDatas" :key="data.provinceId"
                                                    :label="data.provinceName" :value="data.provinceId"
                                                    @click="provinceId4(data.provinceId)" />
                                            </el-select>
                                            <el-select v-model="form.market" placeholder="选择地区" clearable
                                                class="add-select1">
                                                <el-option v-for="data in cityDatas" :key="data.cityId"
                                                    :label="data.cityName" :value="data.cityId"
                                                    @click="provinceId5(data.cityId)" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="适用机构:" class="add-text">
                                            <el-select v-model="form.institution" placeholder="选择机构" clearable
                                                class="add-select2">
                                                <el-option v-for="data in OragnDatas" :key="data.organId"
                                                    :label="data.organName" :value="data.organId"
                                                    @click="provinceId6(data.organId)" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="分支机构:" class="add-text">
                                            <el-transfer v-model="value" filterable filter-placeholder="搜索机构"
                                                @left-check-change="change" :data="data11" />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="from2">
                                    <el-form-item label="套餐介绍:" class="add-text">
                                        <el-input v-model="form.packageDescription" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="使用规则:" class="add-text">
                                        <el-input v-model="form.packageIntroduction" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="套餐组成:" class="add-text">
                                        <el-input v-model="form.packageRole" type="textarea" />
                                    </el-form-item>
                                </div>

                            </div>
                        </el-form>
                        <div class="add-button">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="addLwyData">
                                确定
                            </el-button>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-dialog>
            <!-- 套餐组成-添加 -->
            <div class="two-add">
                <el-dialog v-model="add" title="选择体检项">
                    <el-input v-model="formInline.user1" placeholder="项目名称" clearable @blur="handleBlur" />
                    <el-table ref="multipleTableRef" :data="AddData1" style="width:68rem"
                        @selection-change="handleSelectionChange1" stripe>
                        <el-table-column type="selection" />
                        <el-table-column property="id" label="项目ID" />
                        <el-table-column label="项目名称" property="name">
                        </el-table-column>
                        <el-table-column property="examinationScope" label="检查范围" />
                        <el-table-column property="examinationMeaning" label="检查意义" show-overflow-tooltip />
                        <el-table-column property="tags" label="适用标签" show-overflow-tooltip />
                        <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                        <el-table-column property="currentPrice" label="售价 " show-overflow-tooltip />
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination :page-size="limit" :pager-count="10" layout="prev, pager, next" :total="total1"
                        @current-change="examinPage" />
                    <!-- 标签 -->
                    <div class="tag">
                        <el-tag v-for="tag in tags" :key="tag.name" class="mx-1" style="margin-right:1rem">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <div class="add-button">
                        <el-button @click="add = false">取消</el-button>
                        <el-button type="primary" @click="addexaminaData">
                            确定
                        </el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 加项包-添加 -->
            <div class="three-add">
                <el-dialog v-model="add1" title="选择体检项">
                    <el-input v-model="formInline.user1" placeholder="项目名称" clearable @blur="handleBlur" />
                    <el-table ref="multipleTableRef" :data="AddData1" style="width:68rem"
                        @selection-change="handleSelectionChange1" stripe>
                        <el-table-column type="selection" />
                        <el-table-column property="id" label="项目ID" />
                        <el-table-column label="项目名称" property="name">
                        </el-table-column>
                        <el-table-column property="examinationScope" label="检查范围" />
                        <el-table-column property="examinationMeaning" label="检查意义" show-overflow-tooltip />
                        <el-table-column property="tags" label="适用标签" show-overflow-tooltip />
                        <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                        <el-table-column property="currentPrice" label="售价 " show-overflow-tooltip />
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination :page-size="limit" :pager-count="10" layout="prev, pager, next" :total="total1"
                        @current-change="examinPage" />
                    <!-- 标签 -->
                    <div class="tag">
                        <el-tag v-for="tag in tags" :key="tag.name" class="mx-1" style="margin-right:1rem">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <div class="add-button">
                        <el-button @click="add1 = false">取消</el-button>
                        <el-button type="primary" @click="Addition">
                            确定
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <!-- 添加体检项弹框 -->
        <div class="examinadd">
            <el-dialog v-model="examin" title="添加体检项">
                <el-tabs v-model="activeName" class="demo-tabs">
                    <el-tab-pane label="套餐组成" name="first" class="al-tab-pane-two"> <el-button
                            @click="add = true">添加</el-button>
                        <el-button @click="open2">删除</el-button>
                        <div class="from1">
                            <el-table ref="multipleTableRef" border :data="tableData1" style="width:68rem"
                                @selection-change="handleSelectionChange3" stripe>
                                <el-table-column type="selection" />
                                <el-table-column label="项目名称" property="itemName">
                                </el-table-column>
                                <el-table-column property="examinationScope" label="检查范围" />
                                <el-table-column property="examinationMeaning" label="检查意义" show-overflow-tooltip />
                                <el-table-column property="tags" label="适用标签" show-overflow-tooltip />
                                <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                                <el-table-column property="currentPrice" label="售价 " show-overflow-tooltip />
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="加项包" name="second" class="al-tab-pane-three">
                        <el-button class="button2" @click="add1 = true">添加</el-button>
                        <el-button class="button2" @click="open3">删除</el-button>
                        <div class="from1">
                            <el-table ref="multipleTableRef" :data="tableData2" style="width: 68rem"
                                @selection-change="handleSelectionChange5" stripe>
                                <el-table-column type="selection" />
                                <el-table-column label="项目名称" property="itemName">
                                </el-table-column>
                                <el-table-column property="examinationScope" label="检查范围" />
                                <el-table-column property="examinationMeaning" label="检查意义" show-overflow-tooltip />
                                <el-table-column property="tags" label="适用标签" show-overflow-tooltip />
                                <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                                <el-table-column property="currentPrice" label="售价 " show-overflow-tooltip />
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="examin = false">取消</el-button>
                        <el-button type="primary" @click="examin = false">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <!-- 编辑弹框 -->
        <div class="edit-bullet">
            <el-dialog v-model="editbuullet1" title="编辑体检套餐">
                <el-tabs v-model="editName" class="demo-tabs">
                    <el-tab-pane label="基本信息" name="first" class="el-tab-pane-first">
                        <el-form :model="editform">
                            <div class="add-form">
                                <div class="from1">
                                    <div class="from1-1">
                                        <el-form-item label="套餐名称:" :label-width="'10rem'" class="add-text">
                                            <el-input v-model="editform.name" class="add-input" />
                                        </el-form-item>
                                        <el-form-item label="套餐ID:" :label-width="'10rem'" class="add-text">
                                            <el-input v-model="editform.id" class="add-input" disabled />
                                        </el-form-item>
                                        <el-form-item label="是否启用:" :label-width="'10rem'" class="add-text">
                                            <el-switch v-model="editform.status" />
                                        </el-form-item>
                                        <el-form-item label="适用标签:" :label-width="'10rem'" class="add-text add-text1"
                                            v-model="editform.packageTag">
                                            <el-check-tag :checked="checked1[0]" @change="onChange1(0)">男性套餐</el-check-tag>
                                            <el-check-tag :checked="checked1[1]" @change="onChange1(1)">女性套餐</el-check-tag>
                                            <el-check-tag :checked="checked1[2]" @change="onChange1(2)">老人套餐</el-check-tag>
                                            <el-check-tag :checked="checked1[3]" @change="onChange1(3)">入职体检</el-check-tag>
                                        </el-form-item>

                                        <el-form-item label="有效时间截止至:" :label-width="'12rem'">
                                            <el-date-picker v-model="editform.effectiveTime" type="date"
                                                placeholder="Pick a date" clearable />
                                        </el-form-item>
                                        <el-form-item label="原价:" :label-width="'10rem'" class="add-text add-text1">
                                            <el-input v-model="editform.originalPrice" class="add-input" />
                                        </el-form-item>
                                        <el-form-item label="售价:" :label-width="'10rem'" class="add-text add-text1">
                                            <el-input v-model="editform.currentPrice" class="add-input" />
                                        </el-form-item>
                                    </div>
                                    <div class="from1-2">
                                        <el-form-item label="适用城市:" class="add-text">
                                            <el-select v-model="editform.provinceName" placeholder="全部" clearable
                                                class="add-select">
                                                <el-option v-for="data in provDatas" :key="data.provinceId"
                                                    :label="data.provinceName" :value="data.provinceId"
                                                    @click="provinceId7(data.provinceId)" />
                                            </el-select>
                                            <el-select v-model="editform.cityName" placeholder="全部" clearable
                                                class="add-select1">
                                                <el-option v-for="data in cityDatas" :key="data.cityId"
                                                    :label="data.cityName" :value="data.cityId"
                                                    @click="provinceId8(data.cityId)" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="适用机构:" class="add-text">
                                            <el-select v-model="editform.organName" placeholder="全部" clearable
                                                class="add-select2">
                                                <el-option v-for="data in OragnDatas1" :key="data.organId"
                                                    :label="data.organName" :value="data.organId"
                                                    @click="provinceId9(data.organId)" />
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="分支机构:" class="add-text">
                                            <el-transfer v-model="editform.subOrganName" filterable
                                                filter-placeholder="搜索机构" @left-check-change="change1" :data="data12"/>
                                        </el-form-item>
                                    </div>
                                </div>
                                <div class="from2">
                                    <el-form-item label="套餐介绍:" class="add-text">
                                        <el-input v-model="editform.packageDescription" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="使用规则:" class="add-text">
                                        <el-input v-model="editform.packageIntroduction" type="textarea" />
                                    </el-form-item>
                                    <el-form-item label="套餐组成:" class="add-text">
                                        <el-input v-model="editform.packageRole" type="textarea" />
                                    </el-form-item>
                                </div>

                            </div>
                        </el-form>
                        <div class="add-button">
                            <el-button @click="editbuullet1 = false">取消</el-button>
                            <el-button type="primary" @click="eaitData">
                                确定
                            </el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="套餐组成" name="second" class="al-tab-pane-two">
                        <el-button @click="add = true">添加</el-button>
                        <el-button @click="open1">删除</el-button>
                        <div class="from1">
                            <el-table ref="multipleTableRef" :data="tableData1" style="width:68rem"
                                @selection-change="handleSelectionChange2" stripe>
                                <el-table-column type="selection" property="id" />
                                <el-table-column label="项目名称" property="itemName">
                                </el-table-column>
                                <el-table-column property="examinationScope" label="检查范围" />
                                <el-table-column property="addrexaminationMeaningess" label="检查意义" show-overflow-tooltip />
                                <el-table-column property="tags" label="适用标签" show-overflow-tooltip />
                                <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                                <el-table-column property="currentPrice" label="售价 " show-overflow-tooltip />
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="加项包" name="third" class="al-tab-pane-three">
                        <el-button class="button2" @click="add1 = true">添加</el-button>
                        <el-button class="button2" @click="open4">删除</el-button>
                        <div class="from1">
                            <el-table ref="multipleTableRef" :data="tableData2" style="width: 68rem"
                                @selection-change="handleSelectionChange6" stripe>
                                <el-table-column type="selection" />
                                <el-table-column label="项目名称" property="itemName">
                                </el-table-column>
                                <el-table-column property="examinationScope" label="检查范围" />
                                <el-table-column property="examinationMeaning" label="检查意义" show-overflow-tooltip />
                                <el-table-column property="tags" label="适用标签" show-overflow-tooltip />
                                <el-table-column property="originalPrice" label="原价" show-overflow-tooltip />
                                <el-table-column property="currentPrice" label="售价 " show-overflow-tooltip />
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-dialog>
            <!-- 套餐组成-添加 -->
            <div class="two-add">
                <el-dialog v-model="edit" title="选择体检项">
                    <el-input v-model="formInline.user" placeholder="项目ID或项目名称" clearable />
                    <el-table ref="multipleTableRef" :data="tableData" style="width:68rem"
                        @selection-change="handleSelectionChange4" stripe>
                        <el-table-column type="selection" />
                        <el-table-column property="name" label="项目ID" />
                        <el-table-column label="项目名称">
                            <template #default="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column property="name" label="检查范围" />
                        <el-table-column property="address" label="检查意义" show-overflow-tooltip />
                        <el-table-column property="address" label="适用标签" show-overflow-tooltip />
                        <el-table-column property="address" label="原价" show-overflow-tooltip />
                        <el-table-column property="address" label="售价 " show-overflow-tooltip />
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination :page-size="limit" :pager-count="10" layout="prev, pager, next" :total="total1"
                        @current-change="examinPage1" />
                    <!-- 标签 -->
                    <div class="tag">
                        <el-tag v-for="tag in tags" :key="tag.name" class="mx-1" closable :type="tag.type">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <div class="add-button">
                        <el-button @click="edit = false">取消</el-button>
                        <el-button type="primary" @click="editexaminaData">
                            确定
                        </el-button>
                    </div>
                </el-dialog>
            </div>
            <!-- 加项包-添加 -->
            <div class="three-add">
                <el-dialog v-model="edit1" title="选择体检项">
                    <el-input v-model="formInline.user1" placeholder="项目ID或项目名称" clearable @blur="handleBlur" />
                    <el-table ref="multipleTableRef" :data="tableData" style="width:68rem"
                        @selection-change="handleSelectionChange" stripe>
                        <el-table-column type="selection" />
                        <el-table-column property="name" label="项目ID" />
                        <el-table-column label="项目名称">
                            <template #default="scope">{{ scope.row.date }}</template>
                        </el-table-column>
                        <el-table-column property="name" label="检查范围" />
                        <el-table-column property="address" label="检查意义" show-overflow-tooltip />
                        <el-table-column property="address" label="适用标签" show-overflow-tooltip />
                        <el-table-column property="address" label="原价" show-overflow-tooltip />
                        <el-table-column property="address" label="售价 " show-overflow-tooltip />
                    </el-table>
                    <!-- 分页 -->
                    <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
                    <!-- 标签 -->
                    <div class="tag">
                        <el-tag v-for="tag in tags" :key="tag.name" class="mx-1" closable :type="tag.type">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <div class="add-button">
                        <el-button @click="edit1 = false">取消</el-button>
                        <el-button type="primary" @click="editaddition">
                            确定
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
        <!-- 图片弹框 -->
        <div class="addImage">
            <el-dialog v-model="ImageTrue" title="添加相应图片">
                <el-upload v-model:file-list="fileList" action="http://8.137.101.130:8080/admin/upload/image"
                    list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
                    :on-success="images">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="imageZoomout">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="Imagecancel">取消</el-button>
                        <el-button type="primary" @click="Imagesure">
                            确定
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { addData, addExamination1, dataAll, edit1Data, edit2Data, delData, delDatas, PackageDatas, delexam, image, image1, images2, deleteImage, Additions, additionspage, deladditions } from '../apis/merchApi'
import { provApi, cityApi, cityOragn, branchData } from '../apis/provAll'
import { examinationApi } from '../apis/examination'
//, ElMessage, ElMessageBox zz
import { ElTable } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ref, reactive } from 'vue';
const formInline = reactive({
    user: '',
    user1: '',
    region: '',
    region1: '',
    region2: ''
    // region3: '',
    // region4: '',
    // region5: ''
})
let cityRegion = ref(1)
let cityRegion1 = ref(1)
let cityRegion2 = ref(1)
let organRegion = ref(1)
const provDatas = reactive([])
const cityDatas = reactive([])
const OragnDatas = reactive([])
const OragnDatas1 = reactive([])
// 添加
let form = reactive({
    id: null,
    name: '',
    orderNumber: 0,
    originalPrice: null,
    currentPrice: null,
    economize: '',
    market: '',
    institution: '',
    packageDescription: '',
    packageIntroduction: '',
    packageRole: '',
    packageTag: 0,
    status: 0,
    subOrganIds: [],
    effectiveTime: ''
})
// 分支机构赋值
const change = (val: any) => {
    form.subOrganIds = []
    form.subOrganIds = val
    console.log(val);

}
//修改
let editform = reactive({
    id: null,
    name: '',
    organName: '',
    cityName: '',
    provinceName: '',
    subOrganName: [],
    originalPrice: null,
    currentPrice: null,
    packageDescription: '',
    packageIntroduction: '',
    packageRole: '',
    packageTag: 0,
    status: 0,
    subOrganIds: [],
    effectiveTime: ''
})

const ruleForm = reactive<RuleForm>({
    name: 'Hello',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
interface User {
    id: Number
    currentPrice: Number
    cityName: string
    name: string
    orderNumber: Number
    originalPrice: Number
    provinceName: string
    status: Number
}
let tags = reactive([
])
let name: { name: string; };
const activeName = ref('first')
const editName = ref('first')
interface RuleForm {
    name: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    type: string[]
    resource: string
    desc: string
}
interface Option {
    key: number
    label: string
    // initial: string
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
// 勾选赋值
const multipleSelection = ref<User[]>([])
const multipleSelection1 = ref<User[]>([])
const multipleSelection2 = ref<User[]>([])
const multipleSelection3 = ref<User[]>([])
const multipleSelection4 = ref<User[]>([])
let multipleSelectionId = reactive([])
let multipleSelectionId1 = reactive([])
let multipleSelectionId2 = reactive([])
let multipleSelectionId3 = reactive([])
let multipleSelectionId4 = reactive([])
// 页码
const pageSize4 = ref(5)
const currentPage4 = ref(1)
const page = ref(1)
const limit = ref(5)
let total = ref(0)
let total1 = ref(0)
// 添加弹框
const dialogFormVisible = ref(false)
const add = ref(false)
const edit = ref(false)
const add1 = ref(false)
const edit1 = ref(false)
const editbuullet1 = ref(false)
const examin = ref(false)
const ImageTrue = ref(false)
const imageZoomout = ref(false)
// 标签
const checked = ref<boolean[]>([false, false, false, false]);
let checked1 = reactive<boolean[]>([false, false, false, false]);
// 是否勾选
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}
const handleSelectionChange2 = (val: User[]) => {
    multipleSelection1.value = val
}
const handleSelectionChange3 = (val: User[]) => {
    multipleSelection2.value = val

}
// 体检项
let arrex = reactive([])
let Id = ref()
const handleSelectionChange1 = (val: User[]) => {
    tags.length = 0;
    arrex.length = 0
    for (let i = 0; i < val.length; i++) {
        arrex.push(val[i].id)
        name = { name: val[i].name }
        tags.push(name)
    }
}
const handleSelectionChange4 = (val: User[]) => {
    tags.length = 0;
    arrex.length = 0
    for (let i = 0; i < val.length; i++) {
        arrex.push(val[i].id)
        name = { name: val[i].name }
        tags.push(name)
    }
}
const handleSelectionChange5 = (val: User[]) => {
    multipleSelection3.value = val
}
const handleSelectionChange6 = (val: User[]) => {
    multipleSelection4.value = val
}
let tableData: User[] = reactive([])
let tableData1: User[] = reactive([])
let tableData2: User[] = reactive([])
let AddData1: User[] = reactive([])
let states = []
let states1 = []
let check=reactive([])
// 分支机构
const addbranch = () => {
    branchData(cityId.value, organId.value).then(({ data }) => {
        states.length = 0
        states1.length = 0
        for (let i = 0; i < data.data.length; i++) {
            states.push(data.data[i].name)
            states1.push(data.data[i].name)
        }
        data11.value = generateData(data.data)
        data12.value = generateData1(data.data)


    })
}
const generateData = (branchData) => {
    const data: Option[] = []
    // const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states.forEach((city, index) => {
        data.push({
            label: city,
            key: branchData[index].subId
            // initial: initials[index],
        })
    })
    return data
}
const data11 = ref<Option[]>(generateData([]))
const value = ref([])
// 页面渲染
let provId = ref()
let cityId = ref()
let organId = ref()
// 省份的渲染
const provData = async () => {
    const { data } = await provApi()
    if (data.code == 0) {
        provDatas.push(...data.data)
        // console.log(provDatas); 
    }
}
provData()
// 市的接口
const provinceId1 = (v: number) => {
    provId.value = v
    const cityData = async () => {
        const { data } = await cityApi(v)
        if (data.code == 0) {
            cityDatas.length = 0
            cityDatas.push(...data.data)
            
            if (cityDatas.length == 0) {
                formInline.region1 = ''
            } else {
                formInline.region1 = cityDatas[0].cityName;
                // formInline.region4 = cityDatas[0].cityName;
                cityRegion.value = data.data[0].cityId
                cityId.value = data.data[0].cityId
            }

        }
    }
    cityData()
}
watch(cityRegion, () => {
    if (cityRegion.value != 1) {
        provinceId2(cityRegion.value)
    }

})
const provinceId4 = (v: number) => {
    provId.value = v
    const cityData = async () => {
        const { data } = await cityApi(v)
        if (data.code == 0) {
            cityDatas.length = 0
            cityDatas.push(...data.data)
            if (cityDatas.length == 0) {
                form.market = ''
            } else {
                form.market = cityDatas[0].cityName;
                cityRegion1.value = data.data[0].cityId
                cityId.value = data.data[0].cityId
            }

        }
    }
    cityData()
}
watch(cityRegion1, () => {
    if (cityRegion1.value != 1) {
        provinceId5(cityRegion1.value)
    }

})
// 机构
const provinceId2 = (v: number) => {
    cityId.value = v
    cityOragn(v).then(({ data }) => {
        OragnDatas.length = 0
        OragnDatas.push(...data.data)

        if (OragnDatas.length == 0) {
            formInline.region2 = ''
        } else {
            formInline.region2 = OragnDatas[0].organName
            formInline.region5 = OragnDatas[0].organName
            organId.value = data.data[0].organId
            addbranch()
        }
    })
}
const provinceId5 = (v: number) => {
    cityId.value = v
    cityOragn(v).then(({ data }) => {
        OragnDatas.length = 0
        OragnDatas.push(...data.data)

        if (OragnDatas.length == 0) {
            form.institution = ''
            states.length = 0
        } else {
            form.institution = OragnDatas[0].organName
            organId.value = data.data[0].organId
            addbranch()
        }
    })
}
const provinceId3 = (v: number) => {
    organId.value = v
    addbranch()

}
const provinceId6 = (v: number) => {
    organId.value = v
    addbranch()

}
// 编辑机构
const provinceId7 = (v) => {
    provId.value = v
    editform.subOrganName = []
    // states1.length = 0
    const cityData = async () => {
        const { data } = await cityApi(v)
        if (data.code == 0) {
            cityDatas.length = 0
            cityDatas.push(...data.data)
            if (cityDatas.length == 0) {
                editform.cityName = ''
            } else {
                editform.cityName = cityDatas[0].cityName;
                cityRegion2.value = data.data[0].cityId
                cityId.value = data.data[0].cityId
            }

        }
    }
    cityData()
}
watch(cityRegion2, () => {
    if (cityRegion2.value != 1) {
        provinceId8(cityRegion2.value)
    }

})
const provinceId8 = (v: number) => {
    cityId.value = v
    states1.length = 0
    cityOragn(v).then(({ data }) => {
        OragnDatas1.length = 0
        // console.log(data);
        OragnDatas1.push(...data.data)

        if (OragnDatas1.length == 0 ) {
            editform.organName = ''
            states1.length = 0
        } else {
            editform.organName = OragnDatas1[0].organName
            organId.value = data.data[0].organId

            addbranch()
        }
    })
}
const provinceId9 = (v: number) => {
    organId.value = v
    addbranch()
}
// 页面
const alldata = () => {
    dataAll(currentPage4.value, pageSize4.value, formInline.user, cityId.value, provId.value, organId.value).then(({ data }) => {
        console.log(cityId.value, provId.value, organId.value,1121);
        
        tableData.length = 0
        // data.data.sort((a, b) => {
        //     return b.id - a.id
        // })
        cityRegion.value = 1
        tableData.push(...data.data)
        total.value = data.count
        // console.log(tableData,34567);
        
    })
}
alldata()
// 体检项渲染
const examinaData = async () => {
    const { data } = await examinationApi(page.value, limit.value, formInline.user1)
    if (data.code == 0) {
        AddData1.length = 0
        AddData1.push(...data.data)
        total1.value = data.count
    }
}
examinaData()
// 加项包
const Addition = () => {
    add1.value = false
    Additions(arrex, Id.value).then(({ data }) => {
    })
    examinaData()
    additionspage(Id.value).then(({ data }) => {
        tableData2.length = 0
        tableData2.push(...data.data)

    })

}
const editaddition = () => {
    edit1.value = false
    Additions(arrex, Id.value).then(({ data }) => {
    })
    examinaData()
    additionspage(Id.value).then(({ data }) => {
        tableData2.length = 0
        tableData2.push(...data.data)

    })
}
//添加套餐里面的体检项
const addexaminaData = () => {
    add.value = false
    addExamination1(arrex, Id.value).then(() => {
    })
    examinaData()
    PackageDatas(Id.value).then(({ data }) => {
        tableData1.length = 0
        tableData1.push(...data.data)
    })
}
// 编辑里面的添加套餐里面的体检项
const editexaminaData = () => {
    edit.value = false
    addExamination1(arrex, Id.value).then(() => {
    })
    examinaData()
    PackageDatas(Id.value).then(({ data }) => {
        tableData1.length = 0
        tableData1.push(...data.data)
    })
}
// 体检项搜索
const handleBlur = () => {
    examinaData()
    formInline.user1 = ''
}
// 添加里面的标签
const onChange = (index: number): void => {
    checked.value[index] = index 
    form.packageTag = checked.value[index]
    const newChecked = checked.value.map((value, i) => i === index);
    checked.value = newChecked
}
//添加 
const addLwyData = () => {
    // 是否启用的转换
    const dorm1 = form.status == true ? 1 : 0
    form.status = dorm1
    // 价格
    Number(form.originalPrice)
    Number(form.currentPrice)
    console.log(form);
    provId.value = null
    cityId.value = null
    organId.value = null
    addData(form).then(({ data }) => {
        dialogFormVisible.value = false
        ElMessage.success('添加成功');
        form.name = ''
        form.originalPrice = null
        form.currentPrice = null
        form.packageDescription = ''
        form.packageIntroduction = ''
        form.packageRole = ''
        form.effectiveTime = ''
        form.market = ''
        form.institution = ''
        form.economize = ''
        form.subOrganIds = []
        alldata()
    })
}
// 图片添加
const dialogImageUrl = ref('')
const fileList = ref<UploadUserFile[]>([])
// 图片删除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    deleteImage(uploadFile.id).then(({ data }) => {
    })

}
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url!
    imageZoomout.value = true
}
// 编辑里面的标签
const onChange1 = (index: number): void => {
    checked1[index] = index
    editform.packageTag = checked1[index]
    const newChecked = checked1.map((value, i) => i === index);
    checked1 = newChecked
}
// 编辑取值
const change1 = (val: any) => {
    editform.subOrganIds = []
    editform.subOrganIds = val
}
const handleClick = (row) => {
    let niYaoDeId={provinceId:0,provinceName:''}
    provDatas.forEach((v)=>{
        if(v.provinceName==row.provinceName){
            niYaoDeId.provinceId=v.provinceId;
            niYaoDeId.provinceName=v.provinceName;
        }
    })
    // console.log(niYaoDeId);
    
    Id.value = row.id
    editbuullet1.value = true
    edit1Data(row.id).then(({ data }) => {
        // console.log(data.data);
        editform.id = data.data.id
        editform.name = data.data.name
        let aa = data.data.status == 0 ? false : true
        data.data.status = aa
        editform.status = data.data.status
        editform.packageTag = data.data.packageTag
        Object.keys(checked1).forEach(key => {
            checked1[key] = false;  // 重置属性值为初始状态
            if (editform.packageTag == key) {
                checked1[key] = true;
            }
        });
        editform.effectiveTime = data.data.effectiveTime
        editform.originalPrice = data.data.originalPrice
        editform.currentPrice = data.data.currentPrice
        editform.packageDescription = data.data.packageDescription
        editform.packageIntroduction = data.data.packageIntroduction
        editform.packageRole = data.data.packageRole
        editform.cityName = data.data.cityName
        editform.organName = data.data.organName
        editform.provinceName=niYaoDeId.provinceName
        PackageDatas(row.id).then(({ data }) => {
            tableData1.length = 0
            tableData1.push(...data.data)
        })
        additionspage(row.id).then(({ data }) => {
            tableData2.length = 0
            tableData2.push(...data.data)

        })
        branchData(data.data.cityId, data.data.organId).then(({ data }) => {
            states1.length = 0
            for (let i = 0; i < data.data.length; i++) {
                states1.push(data.data[i].name)
            }
            data12.value = generateData1(data.data)
        })
        cityApi(niYaoDeId.provinceId).then(({data})=>{
            cityDatas.length = 0
            cityDatas.push(...data.data)
        })
        editform.subOrganName = [data.data.subOrganId]
    })
}
// 编辑里面的穿梭框
const generateData1 = (branchData) => {
    const data: Option[] = []
    // const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
    states1.forEach((city, index) => {
        data.push({
            label: city,
            key: branchData[index].subId
            // initial: initials[index],
        })
    })
    return data
}
const data12 = ref<Option[]>(generateData1([]))
const eaitData = () => {
    // 是否启用的转换
    const dorm1 = editform.status == true ? 1 : 0
    editform.status = dorm1
    // 价格
    Number(editform.originalPrice)
    Number(editform.currentPrice)
    provId.value = null
    cityId.value = null
    organId.value = null
    edit2Data(editform).then(({ data }) => {
        alldata()
        editbuullet1.value = false
        ElMessage.success('编辑成功');
    })
}
// 添加体检项  套餐组成渲染
const handleClick1 = (row: { id: Number }) => {
    Id.value = row.id
    examin.value = true
    // 套餐组成渲染
    PackageDatas(row.id).then(({ data }) => {
        tableData1.length = 0
        tableData1.push(...data.data)
    })
    // 加项包
    additionspage(row.id).then(({ data }) => {
        tableData2.length = 0
        tableData2.push(...data.data)

    })
}
// 添加图片
let packageId = ref()
const handleClick2 = (row) => {
    fileList.value.length = 0
    packageId.value = row.id
    ImageTrue.value = true
    images2(row.id).then(({ data }) => {
        fileList.value = data.data.map((v) => {
            v.url = v.image;
            v.name = v.title;
            delete v.image;
            delete v.title;
            return v
        })
    })
}
// 图片
let image2 = []
let images = (v, h) => {
    let data = new FormData()
    data.append('file', h.raw)
    image(data).then(({ data }) => {
        image2.push(data.data)
        // image2.length=0
        console.log(image2);
    })
}
const Imagesure = () => {
    ImageTrue.value = false
    fileList.value.length = 0;
    image1(image2, packageId.value).then(({ data }) => {
    })
}
const Imagecancel = () => {
    ImageTrue.value = false
    fileList.value.length = 0;
}
// 查询
const onSubmit = () => {
    if (formInline.region1 == '') {
        cityId.value = null
    }
    if (formInline.region2 == '') {
        organId.value = null
    }

    alldata()
    formInline.user = ''
    formInline.region = ''
    formInline.region1 = ''
    formInline.region2 = ''

}
// 重置
const onSubmit1 = () => {
    organId.value = null
    cityId.value = null
    provId.value = null
    alldata()

}
//页面显示条数
const handleSizeChange = (val: number) => {
    pageSize4.value = val
    alldata()
}
const handleCurrentChange = (val: number) => {
    currentPage4.value = val
    alldata()
}
const filterMethod = (query: string, item: { initial: string; }) => {
    return item.initial.toLowerCase().includes(query.toLowerCase())
}
const examinPage = (val: number) => {
    page.value = val
    examinaData()
}
const examinPage1 = (val: number) => {
    page.value = val
    examinaData()
}
// 删除
const open = () => {
    for (let i = 0; i < multipleSelection.value.length; i++) {
        multipleSelectionId.push(multipleSelection.value[i].id)
        const array = Object.values(multipleSelectionId)
        multipleSelectionId = array
    }
    if (multipleSelection.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }
};
const deleteData = () => {
    // 执行删除操作的逻辑
    delDatas(multipleSelectionId).then(() => {
        multipleSelectionId = []
        alldata()
        ElMessage.success('删除成功');
    }).catch(() => {
        ElMessage.error('删除失败');
    })
};
const open1 = () => {
    for (let i = 0; i < multipleSelection1.value.length; i++) {
        multipleSelectionId1.push(multipleSelection1.value[i].id)
        const array1 = Object.values(multipleSelectionId1)
        multipleSelectionId1 = array1
    }
    if (multipleSelection1.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData1(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }
}
const deleteData1 = () => {
    delexam(multipleSelectionId1, editform.id).then(() => {
        multipleSelectionId1 = []
        ElMessage.success('删除成功');
    }).catch(() => {
        ElMessage.error('删除失败');
    })
    PackageDatas(editform.id).then(({ data }) => {
        tableData1.length = 0
        tableData1.push(...data.data)
    })
}
const open2 = () => {
    for (let i = 0; i < multipleSelection2.value.length; i++) {
        multipleSelectionId2.push(multipleSelection2.value[i].id)
        const array2 = Object.values(multipleSelectionId2)
        multipleSelectionId2 = array2
    }
    if (multipleSelection2.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData2(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }
}
const deleteData2 = () => {
    delexam(multipleSelectionId2, Id.value).then(() => {
        multipleSelectionId2 = []
        ElMessage.success('删除成功');
    }).catch(() => {
        ElMessage.error('删除失败');
    })
    PackageDatas(Id.value).then(({ data }) => {
        tableData1.length = 0
        tableData1.push(...data.data)
    })
}
const open3 = () => {
    for (let i = 0; i < multipleSelection3.value.length; i++) {
        multipleSelectionId3.push(multipleSelection3.value[i].itemId)
        const array = Object.values(multipleSelectionId3)
        multipleSelectionId3 = array
        console.log(multipleSelectionId3);
    }
    if (multipleSelection3.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData3(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }
};
const deleteData3 = () => {
    // 执行删除操作的逻辑
    deladditions(multipleSelectionId3, Id.value).then(() => {
        multipleSelectionId3 = []
        ElMessage.success('删除成功');
        additionspage(Id.value).then(({ data }) => {
            tableData2.length = 0
            tableData2.push(...data.data)

        })
    }).catch(() => {
        ElMessage.error('删除失败');
    })
};
const open4 = () => {
    for (let i = 0; i < multipleSelection4.value.length; i++) {
        multipleSelectionId4.push(multipleSelection4.value[i].itemId)
        const array = Object.values(multipleSelectionId4)
        multipleSelectionId4 = array
        console.log(multipleSelectionId4);
    }
    if (multipleSelection4.value.length > 0) {
        ElMessageBox.confirm(
            '是否确定删除数据?',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                deleteData4(); // 调用删除函数
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '删除已取消',
                });
            });
    } else {
        ElMessageBox.confirm(
            '你没有选择任何数据，请选择一行数据',
            '确认提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
    }
};
const deleteData4 = () => {
    // 执行删除操作的逻辑
    deladditions(multipleSelectionId4, Id.value).then(() => {
        multipleSelectionId4 = []
        ElMessage.success('删除成功');
    }).catch(() => {
        ElMessage.error('删除失败');
    })
    additionspage(Id.value).then(({ data }) => {
        tableData2.length = 0
        tableData2.push(...data.data)

    })
};
const del = (row: { id: Number; }) => {
    delData(row.id).then(() => {
        alldata()
        ElMessage.success('删除成功');
    }).catch(() => {
        ElMessage.error('删除失败');
    })
}
</script>
<style lang="less" scoped>
.Merchandising {
    height: 100%;

    .section {
        height: calc(100% - 3.8rem);
        background-color: #fff;
        margin-left: 1rem;
        margin-right: 1rem;
        margin-top: 1rem;

        .search {
            height: 8.56rem;
            border: 0.5px solid #eee;
            margin: auto;
            margin-left: 1rem;
            margin-right: 1rem;

            p {
                height: 2.5rem;
                font-size: 1.1rem;
                padding-left: 1.5rem;
                border-bottom: 0.5px solid #eee;
                line-height: 2.5rem;
                font-weight: 600;
                margin: 0;
            }

            .demo-form-inline {
                height: 6.46rem;
                margin-left: 2rem;
                line-height: 6.46rem;
                margin-top: 1.2rem;
                font-size: 1.1rem;
            }

            :deep(label) {
                font-size: 1.1rem;
            }

            .item2 {
                margin-top: -1rem;
            }

            .input-lwy {
                width: 12rem;
                height: 2.3rem;
            }

            :deep(.el-input__wrapper) {
                width: 6.5rem;
                height: 2rem;
                font-size: 1.1rem;

                :deep(.el-input__inner) {
                    width: 3rem;
                    height: 2rem;
                    font-size: 1.1rem;
                }

                :deep(svg) {
                    font-size: 1.1rem;
                }
            }

            :deep(.el-select) {
                width: 6.5rem;
                height: 3.5rem;
                font-size: 1.1rem;

            }

            .select2 {
                margin-left: 1rem;
            }

            .item {
                :deep(.el-select) {
                    width: 12rem;
                    height: 3.5rem;
                }
            }

            :deep(.el-button) {
                width: 5rem;
                height: 2.6rem;
                margin-top: -1.5rem;
            }

            .button1 {
                background-color: #fff;
                border: 0.1rem solid rgba(00, 00, 00, 0.5);
                color: #000;

                &:hover {
                    border: 0.1rem solid rgb(0, 121, 254);
                    color: rgb(0, 121, 254);
                }


            }
        }

        // 按钮
        .button2 {
            width: 7rem;
            height: 2.7rem;
            margin-left: 2rem;

            &:hover {
                background-color: #eee;
                border: 0.1rem solid #eee;
                color: #000;
            }
        }

        .button3 {
            width: 7rem;
            height: 2.55rem;
            display: inline-block;
            margin-left: 2rem;
            margin-top: 1rem;
            text-decoration: none;
            font-size: 1rem;
            color: #000;
            font-weight: 100;
            text-align: center;
            border: 0.5px solid rgba(00, 00, 00, 0.2);
            border-radius: 4px;
            line-height: 2.5rem;

            &:hover {
                background-color: #eee;
                border: 0.1rem solid #eee;
                color: #000;
            }
        }

        // 表格
        .table {
            margin: auto;
            margin-top: 1.5rem;
            margin-left: 1.5rem;
            margin-right: 1.5rem;

            :deep(.el-table) {
                border: 1px solid #eee;

                .is-link {
                    color: #1Abc9c;
                }

                .el-table__cell {
                    text-align: center;
                    border: 1px solid #eee;
                    height: 3rem;
                }
            }
        }

        // 分页
        .demo-pagination-block {
            margin-top: 1.5rem;
            float: right;
            margin-right: 2rem;

            :deep(.is-first) {
                font-size: 1.1rem;
            }

            :deep(.el-pager li:hover) {
                color: rgb(26, 188, 156);
            }

            :deep(li.is-active) {
                color: rgb(26, 188, 156)
            }
        }
    }

    // 弹框
    :deep(.add-bullet) {
        .el-dialog {
            width: 72rem;
            height: 44rem;

            .el-dialog__header {
                height: 4rem;
                background-color: #eee;
                margin: 0;
                padding: 0;
                line-height: 4.5rem;

                .el-dialog__title {
                    margin-left: 2rem;
                }

                .el-dialog__headerbtn {
                    height: 4rem;
                }
            }

            .el-dialog__body {
                padding-bottom: 0;
                padding-top: 1rem;

                .el-tab-pane-first {
                    .el-form {
                        height: 25rem;
                        overflow-y: scroll;
                        margin-top: 1.5rem;
                    }

                    .add-form {
                        .from1 {
                            display: flex;
                            justify-content: space-between;

                            .from1-1 {
                                width: 30rem;

                                .add-input {
                                    width: 22rem;
                                    height: 3rem;
                                }

                                .add-text label {
                                    box-sizing: border-box;
                                    padding-right: 3.5rem;
                                    margin-left: -2rem;
                                }

                                .add-text1 label {
                                    padding-right: 5rem;
                                }

                                .el-form-item__label {
                                    padding-right: 3rem;
                                }

                                .el-check-tag {
                                    width: 4rem;
                                    height: 2rem;
                                    margin-left: 1rem;
                                    margin-top: 1rem;
                                    text-align: center;
                                    line-height: 2rem;
                                    font-size: 1rem;
                                    font-weight: 500;
                                }

                                .el-form-item__label {
                                    margin-left: -2rem;
                                }

                                .add-text::before {
                                    content: "*";
                                    color: red;
                                }
                            }

                            .from1-2 {
                                width: 31rem;

                                .el-form-item__label {
                                    padding-left: 1.5rem;
                                }

                                .add-text::before {
                                    content: "*";
                                    color: red;
                                }

                                .add-select {
                                    width: 8rem;
                                    height: 4rem;
                                }

                                .add-select1 {
                                    width: 8rem;
                                    height: 4rem;
                                    margin-left: 2rem;
                                }

                                .add-select2 {
                                    width: 20rem;
                                    height: 4rem;
                                }

                                .el-transfer {
                                    display: flex;

                                    .el-transfer-panel {
                                        width: 10rem;

                                        .el-checkbox-group {
                                            height: 18.9rem;
                                        }

                                        .el-input__wrapper {
                                            border-radius: 2em;
                                        }
                                    }
                                }

                                .el-transfer__buttons {
                                    width: 2rem;
                                    height: 2rem;
                                    padding: 0.3rem;
                                    margin-top: 12rem;

                                    .is-disabled {
                                        padding: 0;
                                        margin: 0;
                                        width: 2rem;
                                        height: 2rem;
                                        border-radius: 50%;
                                    }
                                }

                                .el-button {
                                    width: 2rem;
                                    height: 2rem;
                                    padding: 0.3rem;
                                    border-radius: 50%;
                                    margin: 0;
                                }
                            }
                        }

                        .from2 {
                            .add-text::before {
                                content: "*";
                                color: red;
                            }

                            .el-form-item__label {
                                padding-left: 1.5rem;
                            }

                            .el-textarea__inner {
                                width: 60rem;
                                height: 10rem;
                            }
                        }
                    }

                    .add-button {
                        height: 6rem;
                        margin-top: 1rem;
                        border-top: 0.5px solid #eee;
                        line-height: 6rem;
                        text-align: right;

                        .el-button {
                            width: 8rem;
                            height: 3rem;
                        }
                    }
                }

                .al-tab-pane-three {

                    .from1 {
                        height: 28rem;
                        width: 69.5rem;
                        overflow-y: scroll;
                        margin-top: 2rem;

                        .el-table {
                            height: 34.7rem;

                            .el-table__cell {
                                text-align: center;
                                border: 1px solid #eee;
                                height: 4rem;
                            }
                        }
                    }

                }

            }
        }

        .two-add {

            .el-dialog {
                height: 44rem;

                .el-input {
                    width: 15rem;
                    margin-bottom: 1rem;
                }

                .el-table {
                    height: 25rem;

                    .el-table__cell {
                        text-align: center;
                        border: 1px solid #eee;
                        height: 3rem;
                    }
                }

                .el-pagination {
                    justify-content: end;
                }

                .tag {
                    height: 4rem;
                    border-top: 0.1rem solid #eee;
                    line-height: 4rem;
                }

                .add-button {
                    border-top: 0.1rem solid #eee;
                    height: 4rem;
                    line-height: 4rem;
                    text-align: right;
                }
            }

        }

        .three-add {
            .el-dialog {
                height: 44rem;

                .el-input {
                    width: 15rem;
                    margin-bottom: 1rem;
                }

                .el-table {
                    height: 25rem;

                    .el-table__cell {
                        text-align: center;
                        border: 1px solid #eee;
                        height: 3rem;
                    }
                }

                .el-pagination {
                    justify-content: end;
                }

                .tag {
                    height: 4rem;
                    border-top: 0.1rem solid #eee;
                    line-height: 4rem;
                }

                .add-button {
                    border-top: 0.1rem solid #eee;
                    height: 4rem;
                    line-height: 4rem;
                    text-align: right;
                }
            }
        }

    }

    :deep(.examinadd) {
        .el-dialog {
            width: 73rem;

            .from1 {
                height: 28rem;
                width: 69.5rem;
                overflow-y: scroll;
                margin-top: 2rem;

                .el-table {
                    height: 34.7rem;

                    .el-table__cell {
                        text-align: center;
                        border: 1px solid #eee;
                        height: 4rem;
                    }
                }
            }
        }
    }

    // 修改
    :deep(.edit-bullet) {
        .el-dialog {
            width: 72rem;
            height: 44rem;

            .el-dialog__header {
                height: 4rem;
                background-color: #eee;
                margin: 0;
                padding: 0;
                line-height: 4.5rem;

                .el-dialog__title {
                    margin-left: 2rem;
                }

                .el-dialog__headerbtn {
                    height: 4rem;
                }
            }

            .el-dialog__body {
                padding-bottom: 0;
                padding-top: 1rem;

                .el-tab-pane-first {
                    .el-form {
                        height: 25rem;
                        overflow-y: scroll;
                        margin-top: 1.5rem;
                    }

                    .add-form {
                        .from1 {
                            display: flex;
                            justify-content: space-between;

                            .from1-1 {
                                width: 30rem;

                                .add-input {
                                    width: 22rem;
                                    height: 3rem;
                                }

                                .add-text label {
                                    box-sizing: border-box;
                                    padding-right: 3.5rem;
                                    margin-left: -2rem;
                                }

                                .add-text1 label {
                                    padding-right: 5rem;
                                }

                                .el-form-item__label {
                                    padding-right: 3rem;
                                }

                                .el-check-tag {
                                    width: 4rem;
                                    height: 2rem;
                                    margin-left: 1rem;
                                    margin-top: 1rem;
                                    text-align: center;
                                    line-height: 2rem;
                                    font-size: 1rem;
                                    font-weight: 500;
                                }

                                .el-form-item__label {
                                    margin-left: -2rem;
                                }

                                .add-text::before {
                                    content: "*";
                                    color: red;
                                }
                            }

                            .from1-2 {
                                width: 31rem;

                                .el-form-item__label {
                                    padding-left: 1.5rem;
                                }

                                .add-text::before {
                                    content: "*";
                                    color: red;
                                }

                                .add-select {
                                    width: 8rem;
                                    height: 4rem;
                                }

                                .add-select1 {
                                    width: 8rem;
                                    height: 4rem;
                                    margin-left: 2rem;
                                }

                                .add-select2 {
                                    width: 20rem;
                                    height: 4rem;
                                }

                                .el-transfer {
                                    display: flex;

                                    .el-transfer-panel {
                                        width: 10rem;

                                        .el-checkbox-group {
                                            height: 18.9rem;
                                        }

                                        .el-input__wrapper {
                                            border-radius: 2em;
                                        }
                                    }
                                }

                                .el-transfer__buttons {
                                    width: 2rem;
                                    height: 2rem;
                                    padding: 0.3rem;
                                    margin-top: 12rem;

                                    .is-disabled {
                                        padding: 0;
                                        margin: 0;
                                        width: 2rem;
                                        height: 2rem;
                                        border-radius: 50%;
                                    }
                                }

                                .el-button {
                                    width: 2rem;
                                    height: 2rem;
                                    padding: 0.3rem;
                                    border-radius: 50%;
                                    margin: 0;
                                }
                            }
                        }

                        .from2 {
                            .add-text::before {
                                content: "*";
                                color: red;
                            }

                            .el-form-item__label {
                                padding-left: 1.5rem;
                            }

                            .el-textarea__inner {
                                width: 60rem;
                                height: 10rem;
                            }
                        }
                    }

                    .add-button {
                        height: 6rem;
                        margin-top: 1rem;
                        border-top: 0.5px solid #eee;
                        line-height: 6rem;
                        text-align: right;

                        .el-button {
                            width: 8rem;
                            height: 3rem;
                        }
                    }
                }

                .al-tab-pane-two {

                    .from1 {
                        height: 28rem;
                        width: 69.5rem;
                        overflow-y: scroll;
                        margin-top: 2rem;

                        .el-table {
                            height: 34.7rem;

                            .el-table__cell {
                                text-align: center;
                                border: 1px solid #eee;
                                height: 4rem;
                            }
                        }
                    }

                }

                .al-tab-pane-three {

                    .from1 {
                        height: 28rem;
                        width: 69.5rem;
                        overflow-y: scroll;
                        margin-top: 2rem;

                        .el-table {
                            height: 34.7rem;

                            .el-table__cell {
                                text-align: center;
                                border: 1px solid #eee;
                                height: 4rem;
                            }
                        }
                    }

                }
            }
        }

        .two-add {

            .el-dialog {
                height: 44rem;

                .el-input {
                    width: 15rem;
                    margin-bottom: 1rem;
                }

                .el-table {
                    height: 25rem;

                    .el-table__cell {
                        text-align: center;
                        border: 1px solid #eee;
                        height: 3rem;
                    }
                }

                .el-pagination {
                    justify-content: end;
                }

                .tag {
                    height: 4rem;
                    border-top: 0.1rem solid #eee;
                    line-height: 4rem;
                }

                .add-button {
                    border-top: 0.1rem solid #eee;
                    height: 4rem;
                    line-height: 4rem;
                    text-align: right;
                }
            }

        }

        .three-add {
            .el-dialog {
                height: 44rem;

                .el-input {
                    width: 15rem;
                    margin-bottom: 1rem;
                }

                .el-table {
                    height: 25rem;

                    .el-table__cell {
                        text-align: center;
                        border: 1px solid #eee;
                        height: 3rem;
                    }
                }

                .el-pagination {
                    justify-content: end;
                }

                .tag {
                    height: 4rem;
                    border-top: 0.1rem solid #eee;
                    line-height: 4rem;
                }

                .add-button {
                    border-top: 0.1rem solid #eee;
                    height: 4rem;
                    line-height: 4rem;
                    text-align: right;
                }
            }
        }

    }

    // 图片
    .addImage {
        img {
            width: 45rem;
            height: 45rem;
        }

    }

}
</style>